<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        background-color: #f3f0f0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0;
        overflow-x: hidden;
      }
      h1 {
        margin: 10px;
      }
      .box {
        background-color: skyblue;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 200px;
        margin: 10px;
        border-radius: 10px;
        transform: translateX(400%);
        transition: transform .5s ease;
      }
      .box:nth-of-type(even){
        transform: translateX(-400%);
      }
      .box.show{
        transform: translateX(0);
      }
      .box h2 {
        font-size: 45px;
      }
    </style>
  </head>
  <body>
    <h1>滚动查看</h1>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <div class="box">
      <h2>Context</h2>
    </div>
    <script>
      const boxs=document.querySelectorAll('.box')
      window.addEventListener('scroll',checkBox)
      checkBox()
      function checkBox(){
        boxs.forEach(box=>{
          let triggerHeight=window.innerHeight*2/3
          let boxTop=box.getBoundingClientRect().top
          if(boxTop<triggerHeight){
            box.classList.add('show')
          }else{
            box.classList.remove('show')
          }
        })
      }
    </script>
  </body>
</html>
